// 工具类样式

// 文本对齐
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

// 浮动
.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

// 显示类型
.display-block {
  display: block;
}

.display-inline {
  display: inline;
}

.display-inline-block {
  display: inline-block;
}

.display-flex {
  display: flex;
}

.display-none {
  display: none;
}

// 间距工具类
@for $i from 0 through 10 {
  .m-#{$i} {
    margin: #{$i * 4}px;
  }

  .mt-#{$i} {
    margin-top: #{$i * 4}px;
  }

  .mr-#{$i} {
    margin-right: #{$i * 4}px;
  }

  .mb-#{$i} {
    margin-bottom: #{$i * 4}px;
  }

  .ml-#{$i} {
    margin-left: #{$i * 4}px;
  }

  .p-#{$i} {
    padding: #{$i * 4}px;
  }

  .pt-#{$i} {
    padding-top: #{$i * 4}px;
  }

  .pr-#{$i} {
    padding-right: #{$i * 4}px;
  }

  .pb-#{$i} {
    padding-bottom: #{$i * 4}px;
  }

  .pl-#{$i} {
    padding-left: #{$i * 4}px;
  }
}

// 宽度工具类
.w-100 {
  width: 100%;
}

.w-50 {
  width: 50%;
}

// 高度工具类
.h-100 {
  height: 100%;
}

// 文本工具类
.text-bold {
  font-weight: bold;
}

.text-muted {
  color: #909399;
}

.text-primary {
  color: $primary-color;
}

.text-success {
  color: $success-color;
}

.text-warning {
  color: $warning-color;
}

.text-error {
  color: $error-color;
}
